<template>
    <div class="goodList">
        <div class="goodItem" :key="item.id" v-for="item in recommondsData" @click="goToDetial(item)">
            <img style="
          margin-left: auto;
          margin-right: auto;
          display: flex;
          margin-top: 30px;
        " width="150px" height="150px" :src="item.skus[0].images.split(',')[0]" />
            <div class="title" :title="item.title">{{ item.title }}</div>
            <div class="mainPrice">
                <i class="mod_price_i">¥</i>
                <span class="mod_price">{{ item.skus[0].price }}</span>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    import { Component, Vue, Prop } from "vue-property-decorator";
    import { Action, Getter } from "vuex-class";
    @Component({
        components: {},
    })
    export default class RecommondsIndex extends Vue {
        @Prop() params: any;
        public recommondsData = new Array < any > ();
        public async created() {
            this.recommondsData = this.params.recommondsData;
        }
        public goToDetial(item: any) {
            let routeOne = this.$router.resolve({
                name: "detial",
                query: {
                    id: item.id,
                },
            });
            window.open(routeOne.href, "_blank");
        }
    }
</script>

<style lang="less" scoped>
    .goodList {
        flex-direction: row;
        flex-wrap: wrap;
        width: 150px;
        display: flex;
        justify-content: center;
        margin-left: 20px;

        ul {
            display: flex;
            flex-direction: column;
            margin: 0px;
            padding: 0px;

            li {
                list-style-type: none;
                display: flex;
                margin: 0px;
                padding: 0px;
            }
        }

        .goodItem {
            width: 150px;
            height: 250px;
            background: white;
            margin-left: 5px;
            cursor: pointer;
            display: flex;
            flex-direction: column;

            .title {
                height: 48px;
                margin-left: auto;
                margin-right: auto;
                font-size: 14px;
                line-height: 24px;
                text-align: left;
                color: #666;
                -webkit-transition: color 0.2s ease;
                transition: color 0.2s ease;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-top: 10px;
                white-space: nowrap;
                width: 150px;
                white-space: nowrap;
            }

            .mainPrice {
                width: 190px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 15px;

                .mod_price {
                    display: inline-block;
                    line-height: 18px;
                    height: 18px;
                    color: #e1251b;
                    font-size: 20px;
                    font-weight: 700;
                    font-family: arial, sans-serif;
                }

                .mod_price_i {
                    vertical-align: middle;
                    font-size: 12px;
                    font-weight: 700;
                    font-family: MicrosoftYahei-regular, Arial, Helvetica, sans-serif;
                    color: #e1251b;
                    font-style: normal;
                }
            }
        }
    }
</style>